<template>
    <div class="Category-container">
         <van-tabs @click="getsub">
            <van-tab v-for="(item,i) in category" :title="item.name" :key=i class="sub">
             <div class="sub-item" v-for="(item,i) in  subcategory" :key=i  @click="getgoodlist(item.id,item.name)">
                 <img :src="item.img" >
                 <span>{{item.name}}</span>
             </div>
  </van-tab>
</van-tabs>

    </div>
</template>
<script>
export default {
    data(){
        return {
            category:[],
            subcategory:[],
            id:1
        }
    },
    created() {
        this.getcategory()
        this.getsubcategory()
    },
    methods: {
        getcategory(){
            this.$http.get('v1/goods/getGoodsCategories').then(res=>{
                  this.category=res.data.data
                //   console.log(res.data.data)
            })
        },
        getsubcategory(){
            this.$http.get("v1/goods/getGoodsSubCategories/" + this.id ).then(res=>{
                // console.dir(res)
                  this.subcategory=res.data.data
                //   console.log(res.data.data)
            })
        },
        getsub(i,title){
            const cateId = this.category[i].id
            console.log( this.category[i])
            this.$http.get("v1/goods/getGoodsSubCategories/"+cateId).then(res=>{
                // console.dir(res)
                this.subcategory=res.data.data
            })
        },
        getgoodlist(id,title){
          this.$router.push({ path: "/GoodsList", query: { id, title } });
        }
      
    },
}

</script>
<style lang="less">
    .sub{
        padding:10px 25px;
        width:100%;
        display: flex;
        flex-wrap:wrap;
        justify-content:space-between;
        .sub-item{
          width:45%;
          height:200px;
        }
    }
</style>